<!--
 * @Descripttion: 视频
 * @version: V1.0
 * @Author: GW
 * @Date: 2021-09-09 14:18:01
 * @LastEditors: GW
 * @LastEditTime: 2021-10-13 10:50:39
-->
<template>
    <section class="show-wrapper" :style="data.onPadding?'':{'padding':'0px'}">
        <template v-if="data.src">
            <div class="video-box">
                <video controls id="video" :style="isTrueSrc?{'display':'block'}:{'display':'none'}" :src="data.src" class="video-dom" @error="myFunction"></video>
            </div>
            <div class="video-box-null" v-if="!isTrueSrc">
                <a-icon class="ico" type="play-square" />
                <div class="color-red">视频未能正常加载，或地址错误！</div>
            </div>
        </template>
        <template v-else>
            <div class="video-box-null">
                <a-icon class="ico" type="play-square" />
            </div>
        </template>

    </section>
</template>

<script>
export default {
    name: 'Video',
    props: {
        data: {
            type: Object,
            default: {}
        }
    },
    data () {
        return {
            isTrueSrc: false,
        }
    },
    mounted () {
        //组件默认数据
        let { data } = this;
        let defaultData = {
            text: data.text ? data.text : '视频',
            onEdit: false,
        }
        this.data = Object.assign(data, defaultData);
        this.videoRuning();
    },
    methods: {
        myFunction () {
            //音视频发生错误时候触发
            this.isTrueSrc = false;
            this.data.isVideoFlase = true;//保存表单的时候，判断视频地址错误的标识
        },
        videoRuning () {
            //视频是否可播放
            let elevideo = document.getElementById("video");
            console.log(elevideo);
            let that = this;
            if (elevideo) {
                elevideo.addEventListener('loadedmetadata', function () { //加载数据
                    //视频的总长度
                    console.log('视频的总长度:', elevideo.duration);
                    if (elevideo.duration > 0) {
                        that.isTrueSrc = true;
                    } else {
                        that.isTrueSrc = false;
                    }
                });
            }
        }
    },
    watch: {
        'data.src': function (newval, oldval) {
            let that = this;
            let elevideo = document.getElementById("video");
            if (elevideo) {
                elevideo.addEventListener('loadedmetadata', function () { //加载数据
                    //视频的总长度
                    console.log('视频的总长度:', elevideo.duration);
                    if (elevideo.duration > 0) {
                        that.isTrueSrc = true;
                    } else {
                        that.isTrueSrc = false;
                    }
                });
                elevideo.addEventListener('waiting', function () { //加载
                    console.log("加载中");
                });
                elevideo.addEventListener('play', function () { //播放开始执行的函数
                    console.log("开始播放");
                });
                elevideo.addEventListener('playing', function () { //播放中
                    console.log("播放中");
                });
                elevideo.addEventListener('pause', function () { //暂停开始执行的函数
                    console.log("暂停播放");
                });
            }

        }
    }
}
</script>

<style lang="less" scoped>
    .show-wrapper {
        padding:6px 12px;
        .video-box-null {
            height: 200px;
            padding-top: 60px;
            background: #eee;
            text-align: center;
            .ico {
                font-size: 56px;
                color: #ccc;
            }
            .color-red {
                color: rgb(211, 58, 58);
                font-size: 14px;
                font-weight: bold;
            }
        }
        .video-box {
            position: relative;
            width: 100%;
            .video-dom {
                width: 100%;
            }
            img {
                width: 100%;
            }
            .image-box {
                width: 100%;
            }
        }
    }
</style>